<template>
  <transition :name="animationType">
      <slot></slot>
  </transition>
</template>

<script setup lang="ts">

interface IProps {
  animationType: 'slide-bottom' | 'slide-top' | 'slide-left' | 'slide-right'
}

/**
 * 子组件必须使用v-if控制
 *
 * slide-right	由右向左划入
 * slide-left	  由左向右划入
 * slide-top	  由上至下划入
 * slide-bottom	由下至上划入
 * */
withDefaults(defineProps<IProps>(), {
  animationType: 'slide-bottom',
});

</script>

<style scoped>
/* slide-bottom 动画效果 */
.slide-bottom-enter-active,
.slide-bottom-leave-active {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.slide-bottom-enter-from {
  transform: translateY(100%);
  opacity: 0;
}
.slide-bottom-enter-to {
  transform: translateY(0);
  opacity: 1;
}
.slide-bottom-leave-from {
  transform: translateY(0);
  opacity: 1;
}
.slide-bottom-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

/* slide-top 动画效果 */
.slide-top-enter-active,
.slide-top-leave-active {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.slide-top-enter-from {
  transform: translateY(-100%);
  opacity: 0;
}
.slide-top-enter-to {
  transform: translateY(0);
  opacity: 1;
}
.slide-top-leave-from {
  transform: translateY(0);
  opacity: 1;
}
.slide-top-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

/* slide-right 动画效果 */
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.slide-right-enter-from {
  transform: translateX(100%);
  opacity: 0;
}
.slide-right-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.slide-right-leave-from {
  transform: translateX(0);
  opacity: 1;
}
.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* slide-left 动画效果 */
.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.slide-left-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-left-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.slide-left-leave-from {
  transform: translateX(0);
  opacity: 1;
}
.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>
